<!DOCTYPE html>
<html>
<head>
    <title>Flask-SocketIO Dual Namespace Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener('DOMContentLoaded', function () {
            var chatSocket = io.connect('http://' + document.domain + ':' + location.port + '/chat');
            var notificationSocket = io.connect('http://' + document.domain + ':' + location.port + '/notifications');

            document.getElementById('sendChat').addEventListener('click', function () {
                var message = 'Hello from chat button';
                chatSocket.emit('chat_message', message);
                console.log('Sent chat message:', message);
            });

            document.getElementById('sendNotification').addEventListener('click', function () {
                var notification = 'Hello from notification button';
                notificationSocket.emit('notification', notification);
                console.log('Sent notification:', notification);
            });

            // Listen for responses from the server
            chatSocket.on('chat_response', function(data) {
                console.log('Received chat response:', data);
            });

            notificationSocket.on('notification_response', function(data) {
                console.log('Received notification response:', data);
            });
        });
    </script>
</head>
<body>
    <h1>Flask-SocketIO Dual Namespace Example</h1>
    <p>listen for server </p>
    <button id="sendChat">Send Chat Message</button>
    <button id="sendNotification">Send Notification</button>
</body>
</html>